<template>
	<view>
		<image src="/static/xgbj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" style="opacity: 0;">
				今日巡更
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="top">
			<image src="/static/wxggl.png" mode=""></image>
			<view class="top1">
				<view class="top1text">
					{{info.formatstatus}}
				</view>
				<view class="top1text1">
					{{info.memo}}
				</view>
			</view>
		</view>
		<view class="box">
			<view class="" style="width: 100rpx; height: 40rpx;">

			</view>
			<view class="box_title">
				报修信息
			</view>
			<view class="box_2">
				<view class="box_2text">
					报修类型： <text>{{info.formattype}}</text>
				</view>
				<view class="box_2text">
					报修项目： <text>{{info.protitle}}</text>
				</view>
				<view class="box_2text">
					报修人 ： <text>{{info.name}}</text>
				</view>
				<view class="box_2text">
					联系方式： <text>{{info.hidephone}}</text>
				</view>
				<view class="box_2text">
					住址信息： <text>{{info.communityName}}{{info.roomname}}</text>
				</view>
				<view class="box_2text">
					期望上门时间： <text>{{info.roomtime}}</text>
				</view>
				<view class="box_2text">
					详情信息： <text>{{info.content}}</text>
				</view>


			</view>

			<view class="box_3">
				<image :src="item" v-for="(item,index) in info.pics" :key="index" mode="aspectFill"
					@click="yulan(info.pics,index)"></image>
			</view>

			<view v-if="info.touser" class="box_title" style="border-left: 8rpx solid #37d6c0;">
				报修处理
			</view>
			<view class="box_2" v-if="info.touser">

				<view class="box_2text">
					修理工 ： <text>{{info.touser.personName}}</text>
				</view>
				<view class="box_2text">
					联系方式： <text>{{info.touser.hidephone}}</text>
				</view>
				<view class="box_2text">
					上门时间： <text>{{info.touser.time2}}</text>
				</view>

				<view class="box_2text">
					完成时间： <text>{{info.touser.time3}}</text>
				</view>
				<view class="box_2text">
					详情信息： <text>{{info.touser.tocontent}}</text>
				</view>
			</view>

			<view v-if="info.touser" class="box_3">
				<image :src="item" v-for="(item,index) in info.touser.pics" :key="index" mode=""></image>
			</view>
			<picker @change="bindPickerChange" :value="userindex" :range="username">
				<view class="buttom2" v-if="info.showbtn">
					派遣
				</view>
			</picker>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				xungestate: 1,
				info: {},
				userindex: 0,
				communityId: '',
				id: '',
				username: [],
				touid: '',
				userlist: [],
			}
		},
		onLoad(e) {
			this.communityId = uni.getStorageSync('communityId')
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 10
			this.id = e.id
			this.getinfo()
			this.shangmen()
		},
		methods: {
			bindPickerChange(e) {
				console.log(e.detail.value);
				this.touid = this.userlist[e.detail.value].id
				this.xuanze()
			},
			getinfo() {
				this.$post('wuyecenter/baoxiuinfo', {
					id: this.id,
					communityId: this.communityId
				}, res => {
					this.info = res.data
					this.touser = res.data.touser
					console.log(this.info);
				})
			},
			yulan(item, index) {
				console.log(index);
				uni.previewImage({
					urls: item,
					current: index,

				});
			},

			xungeng(e) {
				this.xungestate = e
			},
			shangmen() {
				this.$post('wuyecenter/leveluserlist', {}, res => {
					this.userlist = res.data.list
					res.data.list.forEach(item => {
						this.username.push(item.personName)
					})
				})
			},
			xuanze() {
				this.$post('wuyecenter/settouid', {
					id: this.id,
					touid: this.touid
				}, res => {
					this.getinfo()
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(255, 255, 255);
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 12rpx;
			height: 24rpx;
			margin-left: 30rpx;
		}
	}

	.top {
		display: flex;
		margin-left: 46rpx;
		margin-top: 60rpx;

		>image {
			width: 97rpx;
			height: 97rpx;
		}
	}



	.top1 {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.top1text {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.top1text1 {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.box {
		background-color: #FFFFFF;
		width: 90vw;
		margin: 30rpx auto;
		border-radius: 20rpx;
	}

	.box_1 {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.topimage {
			width: 94rpx;
			height: 94rpx;
		}
	}

	.box_1-1 {
		margin-left: 10rpx;
	}

	.topimg1 {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		right: 70rpx;

	}

	.box_1-1text {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		// line-height: 20rpx;
	}

	.box_1-1text1 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		// line-height: 20rpx;
	}

	.box_title {
		// margin-top: 50rpx;
		border-left: 8rpx solid #4ab6f9;
		width: 160rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		// line-height: 20rpx;
	}

	.box_2 {
		width: 91%;
		margin: 30rpx auto;
	}

	.box_2text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		// line-height: 20rpx;
		margin: 34rpx 0;

		>text {
			color: #333333;
		}
	}

	.texta {
		width: 91%;
		height: 170rpx;
		margin: 0 auto;
		background-color: #f6f6f6;
	}

	.bxxx {
		margin: 30rpx;
	}

	.box_3 {
		width: 98%;
		margin: 50rpx auto;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-evenly;

		>image {
			margin: 10rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}

	.button {
		width: 498rpx;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		color: #FFFFFF;
		text-align: center;
		background-color: #2e79f9;
		border-radius: 35rpx;
		line-height: 70rpx;
	}

	.buttom2 {
		// margin: 0 20rpx;
		width: 500rpx;
		height: 70rpx;
		position: fixed;
		left: 125rpx;
		bottom: 10%;
		color: #FFFFFF;
		text-align: center;
		background-color: #2e79f9;
		border-radius: 35rpx;
		line-height: 70rpx;
	}
</style>
